<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <t-btn color="primary" label="Flip Menu">
        <t-menu transition-show="flip-right" transition-hide="flip-left">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>Having fun</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Crazy for transitions</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Mind blown</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Scale Menu">
        <t-menu transition-show="scale" transition-hide="scale">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>Having fun</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Crazy for transitions</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Mind blown</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Jump Menu">
        <t-menu transition-show="jump-down" transition-hide="jump-up">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>Having fun</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Crazy for transitions</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Mind blown</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Rotate Menu">
        <t-menu transition-show="rotate" transition-hide="rotate">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>Having fun</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Crazy for transitions</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Mind blown</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>
    </div>
  </div>
</template>
